<template>
    <div>
        <div style="margin-bottom: 10px;display: flex;margin-left: 10px;">

            <span style="margin-top:4px ;color: #808080;font-size: 16px;align:center">分类名称:</span>
            <el-input v-model="queryCondition.name" placeholder="请输入图书分类名称"
                style="width:240px;margin-left:5px ;"></el-input>



            <el-button type="primary" style="width: 80px;margin-left: 9px;" @click="toQuery">查询</el-button>


            <el-button style="width: 80px;" @click="addBookInfo" v-if="userInfo.role != 'ROLE_STUDENT'">新增</el-button>
            <el-button style="width: 80px;" @click="deleteBatchType" v-if="userInfo.role != 'ROLE_STUDENT'">批量删除</el-button>
            <el-button type="success" style="width: 80px;" @click="exportBookType"
                v-if="userInfo.role != 'ROLE_STUDENT'">导出报表</el-button>
            <el-upload class="upload-demo" action="http://localhost:8089/api/type/upload" :show-file-list="false"
                :on-success="uploadSuccess" style="margin-left:10px" v-if="userInfo.role != 'ROLE_STUDENT'">
                <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
        </div>
        <!--表格部分-->
        <div>
            <el-table :data="tableData" style="width: 100%" ref="table" @selection-change="selectChange"
                :row-key="getRowkey">
                <el-table-column type="selection" :reserve-selection="true">

                </el-table-column>
                <el-table-column prop="name" label="图书分类名称">
                </el-table-column>
                <el-table-column prop="description" label="描述">
                </el-table-column>

                <el-table-column label="操作" v-if="userInfo.role!='ROLE_STUDENT'">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="editBookInfo(scope.row)">编辑</el-button>
                        <el-button type="danger" @click="deleteUserInfo(scope.row.id)">删除</el-button>
                    </template>

                </el-table-column>
            </el-table>
        </div>
        <!--分页部分-->
        <div style="margin-top: 10px;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                :page-sizes="[5, 10, 15, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <!--新增、编辑弹出框-->
        <el-dialog title="新增图书分类信息" :visible.sync="addTypeDialog" v-if="addTypeDialog" width="30%"
            @close="addBookTypeClose">
            <template slot="footer">
                <span class="dialog-footer">
                    <el-button type="primary" @click="saveBookTypeInfo">保存</el-button>
                    <el-button @click="reset">重置</el-button>
                </span>
            </template>
            <el-form ref="addBookTypeInfoForm" :model="addTypeInfos" :rules="rules" label-width="90px" size="mini">

                <el-form-item label="分类名称:" prop="name" required>
                    <el-input v-model="addTypeInfos.name"></el-input>
                </el-form-item>
                <el-form-item label="描述:" prop="description" required>
                    <el-input v-model="addTypeInfos.description"></el-input>
                </el-form-item>

            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { saveType, queryTypeByPage, deleteBatch } from '@/api/typeApi.js'
export default {
    name: 'BookType',
    props: {

    },
    components: {

    },
    data() {
        return {
            rules: {
                name: [
                    { required: true, message: '分类名称不能为空', trigger: 'blur' }
                ],
                description: [
                    { required: true, message: '描述不能为空', trigger: 'blur' }
                ]
            },
            addTypeInfos: {
                name: '',
                description: ''
            },
            //新增图书信息弹出框标志
            addTypeDialog: false,
            //每页大小
            pageSize: 5,
            //当前页码
            currentPage: 1,
            //总记录数
            total: 0,
            //查询条件
            queryCondition: {
                anme: ''
            },
            //表格数据
            tableData: [],
            mulitpList: [],
            //选中选项的id
            selectItemId: [],
            userInfo: JSON.parse(localStorage.getItem("user"))
        }
    },
    methods: {
        //上传成功回调函数
        uploadSuccess(response) {
            console.log("响应对象2333::::", response);
            if (response.code === '0') {
                this.$message.success("上传成功")
                this.toQuery()
            } else {
                this.$message.error(response.msg)
            }
        },
        //导出图书类型数据
        exportBookType() {
            const user = localStorage.getItem("user");

            location.href = 'http://localhost:8089/api/type/export?token=' + JSON.parse(user).token
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.toQuery()
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.toQuery()
        },
        getRowkey(row) {
            return row.id
        },
        addBookTypeClose() {

        },
        //编辑
        editBookInfo(row) {
            this.addTypeDialog = true
            this.addTypeInfos = row
            // saveBook(this.addBookInfos).then((res)=>{
            //     if(res.code==='0'){
            //         this.$message.success("编辑成功")
            //     }
            // }).catch((error)=>{
            //     this.$message.error("编辑失败!",error)
            // })
        },
        addBookInfo() {
            this.addTypeInfos = {}
            this.addTypeDialog = true
        },
        //保存图书分类
        saveBookTypeInfo() {
            this.$refs.addBookTypeInfoForm.validate((valid) => {
                if (valid) {
                    saveType(this.addTypeInfos).then((response) => {
                        if (response.code === '0') {
                            this.$message.success("保存成功")
                            this.addTypeDialog = false
                            this.toQuery()
                        }
                    })
                }
            })
        },
        //查询
        toQuery() {
            if (this.queryCondition.name) {
                this.currentPage = 1
            }
            queryTypeByPage(this.queryCondition, this.currentPage, this.pageSize).then((response) => {
                if (response.code === '0') {
                    this.tableData = response.data.list
                    this.total = response.data.total
                }
            }).catch((error) => {
                this.$message.error("分页查询失败!", error)
            })
        },
        //选中发生改变时
        selectChange(selection) {
            this.mulitpList = selection
        },
        //批量删除
        deleteBatchType() {
            deleteBatch(this.mulitpList.map(item => item.id)).then((response) => {
                if (response.code === '0') {
                    this.$message.success("批量删除成功")
                    this.toQuery()
                }
            }).catch((error) => {
                this.$message.error("批量删除失败!", error)
            })
        }
    },
    created() {
        this.toQuery()
    },
    watch: {

    }
}
</script>
<style scoped>
/* 可以添加一些CSS来调整布局 */
.dialog-footer {
    text-align: right;
}
</style>